<template>
  <div>
    <div class="navBar" :style="[{'background':color}]" >
      <div :style="[{'height':navBtnInfo.top+'px'}]" ></div>
      <div class="navCenter" :style="[{'height':navBtnInfo.height+3+'px'}]" >
          <span class="backRow"  @click="goBack" >
              <img  :class="{'blackBack':rowColor==='black'}" :src="rowColor==='black'?blackRow:whiteRow" alt="" >
          </span>
          <span :class="['title',{'beingLeft':position==='left'}]" :style="{'font-size': titleFontSize + 'px','color':fontColor}">{{title}}</span>
          <span v-if="isMsg" :class="['chooseMsg',{'twoWords':isChooseStatus}]" :style="{'right':navBtnInfo.width+14+'px'}" @click="$parent.wantChooseMsg" >
              <span>{{isChooseStatus?'完成':'选择消息'}}</span>
          </span>
      </div>
      <!-- <div class="fillBottom" :style="{'background':color}"></div> -->
    </div>
    <!--
        ******  第一步 在需要使用自定义头部导航的 main.json 中 设置 "navigationStyle": "custom" 开启自定义模式
        * 属性:
        * title 路由名称
        * position 路由标题位置  默认不传为center  left 靠左
        * fontColor 路由字体颜色
        * color 整体导航栏背景颜色
        * rowColor 箭头颜色 只有 white / black 默认是 white
        * goBack 返回箭头绑定的函数
        * isChooseStatus  isMsg // 消息管理特殊按钮 需要用的属性
        ** 顶部手机状态栏的颜色以及胶囊的颜色(这里默认是白色)  需要通过main.json中的navigationBarTextStyle设置支持 "white" "black" 建议和 rowColor 一致
     -->
  </div>
</template>
import storage from '@/utils/storage'
<script>
export default{
    data () {
      return {
        navBtnInfo: { // 微信小程序胶囊的相关信息  提供默认值
          height: 32,
          top: 24,
          right: 365
        },
        firstPage: false,
        whiteRow: require("../../static/images/side.png"),
        blackRow: require("../../static/images/goBack.png")
      }
    },
    props: {
      title: String,
      position: String,
      fontColor: String,
      color: String,  // 整个导航栏背景 支持渐变色、背景图
      goBack: Function,
      rowColor: String,  // 箭头颜色 只有 black / white,
      titleFontSize: Number || String,  // 路由标题字体大小 传入数字 或者字符串 不带单位 单位为px 大小默认为17px
      isMsg: Boolean || false,
      isChooseStatus: Boolean  // 消息选择状态
    },
    onLoad () {
      this.getNavInfo()
    },
    mounted () {
    },
    methods: {
      // 设置导航栏的高度等信息
      getNavInfo () {

        let navBarInfo = this.$storage.getNavBarInfo()
        if (navBarInfo) {
          this.navBtnInfo = navBarInfo;
          this.$forceUpdate()
          // console.log(this.navBtnInfo , '从本地获取的胶囊属性值')
          return
        }

        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        this.$storage.setNavBarInfo(menuButtonObject)
        this.navBtnInfo = menuButtonObject
        this.$forceUpdate()
        // console.log(menuButtonObject, '组件内获取的胶囊属性值')
      }
    }
}
</script>
<style lang="less" scoped>
.navBar {
  flex-direction: column;
  background-color: #fff;
  color: #000;
  // box-sizing: border-box;
  position: relative;
  padding-bottom: 10rpx;
  .backRow {
    display:inline-block;
    position:relative;
    height:100%;
    width:60rpx;
    img {
      position: absolute;
      left: 25rpx;
      width: 17rpx;
      height: 34rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .blackBack {
      width: 38rpx;
      height: 40rpx;
    }
  }
  .backRow:active {
    background-color: rgba(0, 0, 0, 0.15);
  }
  .navCenter {
    position: relative;
  }
  .chooseMsg {
    position: absolute;
    right: 0;
    height: 100%;
    width: 130rpx;
    color: #fff;
    span {
      position: absolute;
      font-size: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .twoWords {
    width: 88rpx;
  }
  .title {
    position: absolute;
    font-size: 34rpx;
    // font-size: 1rem;
    font-weight: 500;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
  .beingLeft {
    left: 70rpx;
    transform: translateY(-50%);
  }
  .fillBottom {
    height: 10rpx;
  }
}
</style>
